반응형 레이아웃을 만드는 것은 웹 개발자의 일반적인 과제입니다. 이 블로그에서는 CSS 그리드가 이 특정 레이아웃에 가장 적합한 접근 방식인 이유에 초점을 맞춰 다양한 CSS 기술을 사용하여 특정 반응형 디자인을 달성하는 방법을 살펴보겠습니다.

도전

다음과 같은 레이아웃을 만들어야 합니다.

데스크탑 보기:

• DIV 1과 DIV 3은 왼쪽에 세로로 쌓여 있으며 각각 왼쪽 열의 50%를 차지합니다.
• DIV 2는 오른쪽 열의 전체 높이를 차지합니다.

모바일 보기:

• 세 ​​개의 div가 모두 수직으로 쌓입니다.

Flexbox가 부족한 이유

Flexbox는 1차원 레이아웃에는 탁월하지만 우리처럼 복잡한 2차원 레이아웃에는 어려움을 겪습니다. 이유는 다음과 같습니다.

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1),
.item:nth-child(3) {
    flex: 1 1 calc(50% - 10px);
}

.item:nth-child(2) {
    flex: 1 1 50%;
}

@media (max-width: 768px) {
    .item {
        flex: 1 1 100%;
    }
}

Flexbox 관련 문제

이 Flexbox 설정에서:

• DIV 2는 DIV 1과 DIV 3의 결합된 높이와 일치하도록 높이를 자동으로 조정할 수 없습니다.
• Flexbox는 복잡한 2차원 배열이 아닌 주로 1차원 레이아웃(행 또는 열)용입니다.

CSS 그리드 솔루션

CSS 그리드는 2차원 레이아웃 생성에 탁월하므로 이 과제에 완벽합니다.

 

   
DIV 1
   
DIV 2
   
DIV 3
 

.container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px;
}

.item {
    background-color: #40c4ff;
    color: white;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}

.item:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.item:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.item:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}

@media (max-width: 768px) {
    .container {
        display: flex;
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}

설명

그리드 레이아웃:

• 두 개의 열과 두 개의 행으로 구성된 그리드를 정의합니다.
• 첫 번째 열과 첫 번째 행에 DIV 1을 배치합니다.
• DIV 2를 두 행에 걸쳐 두 번째 열에 배치합니다.
• 첫 번째 열과 두 번째 행에 DIV 3을 배치합니다.

반응형 디자인:

• 768px 이하 화면의 경우 레이아웃이 플렉스로 전환되어 항목이 수직으로 쌓입니다.

결론

Flexbox는 단순한 1차원 레이아웃에 적합하지만 CSS 그리드는 보다 복잡한 2차원 디자인에 필요한 강력함과 유연성을 제공합니다. CSS 그리드를 사용하면 최소한의 코드와 최대의 제어로 원하는 반응형 레이아웃을 쉽게 얻을 수 있습니다.

이 예제를 자신의 프로젝트에 맞게 자유롭게 조정하고 반응형 레이아웃에 CSS 그리드를 사용하는 이점을 누려보세요!